<template>
  <el-container class="layout-container-demo" style="height: 100%">
    <!-- 侧边开始 -->
    <el-aside width="200px" style="background-color: rgba(240,240,240); padding: 0 20px;">
      <Menu />
    </el-aside>
    <!-- 侧边结束 -->
    <el-container>
      <!-- 头部开始 -->
      <el-header style="line-height: 60px;">
        <Header />
      </el-header>
      <!-- 头部结束 -->
      <el-main>
        <SongLyric v-if="PlaySong.IsShowLyric"></SongLyric>
        <el-scrollbar v-show="!PlaySong.IsShowLyric">
          <!-- key是解决路由参数变化时数据不会改变 -->
          <RouterView :key="routerKey" />
        </el-scrollbar>
      </el-main>
      <!-- 底部开始 -->
      <el-footer>
        <Footer></Footer>
      </el-footer>
      <!-- 底部结束 -->
    </el-container>
  </el-container>
</template>
<script setup lang="ts">
// 导入子组件开始
import Menu from '@/components/layout/menu/Menu.vue'
import Header from '@/components/layout/header/header.vue'
import Footer from '@/components/layout/footer/footer.vue'
import SongLyric from '@/components/common/SongLyric.vue'
import { usePlaySongStore } from '@/store/playsong.ts';
import { computed } from 'vue'
const PlaySong = usePlaySongStore();
import { useRoute } from 'vue-router'
const route = useRoute()
const routerKey = computed(() => {
  return route.path + Math.random()
})
// 导入子组件结束
</script>
<style lang="less" scoped>
</style>